// CatalogMenu.tsx
import React from "react";
import SearchModuleMolecule from "../../UI_KIT/Molecules/SearchModule.molecule";
import { useSearch } from "@/business.InterfaceLayer/hooks/useSeacrhProducts";
import SearchResult from "../../UI_KIT/Cells/SearchResult.ceil";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import NavigationMolecule from "../../UI_KIT/Molecules/Navigation.molecule";

interface CatalogMenuProps {}

const CatalogMenu: React.FC<CatalogMenuProps> = () => {
  const { searchQuery, searchResults, handleSearchChange } = useSearch();

  return (
    <div className="bg-tiffany py-5">
      <div
        className={`${globalContainer} grid grid-cols-[1fr_min-content] grid-rows-[auto_min-content] gap-x-[150px]`}
      >
        <div className="flex gap-5 items-center">
          <NavigationMolecule  />
        </div>
        <div className="w-[280px] relative">
          <SearchModuleMolecule
            value={searchQuery}
            setSearchQuery={handleSearchChange}
          />
          {searchQuery && <SearchResult results={searchResults} />}
        </div>
      </div>
    </div>
  );
};

export default React.memo(CatalogMenu);
